{layout name="../../admin/view/layout/main" /}
{:breadcrumb(['系统管理:system/user/index', '成员管理'])}
<div class="row">
    <div class="col-lg-12">
        <div class="card">
            <div class="card-body">
                <!-- search -->
                <div class="card-search mb-2-5">
                    <form class="row g-3" onsubmit="return false;" id="search-form">
                        <div class="col-auto">
                          <input type="text" class="form-control" autocomplete="off" name="nickname" placeholder="昵称">
                        </div>
                        <div class="col-auto">
                            <input type="text" class="form-control" autocomplete="off" name="phone" placeholder="手机号码">
                          </div>
                          <div class="col-auto">
                            <select class="form-select" name="status">
                                <option value="0">所有</option>
                                <option value="1">正常</option>
                                <option value="2">停用</option>
                              </select>
                          </div>
                          <div class="col-auto">
                            <div class="input-group">
                              <span class="input-group-text">从</span>
                              <input type="text" name="start" autocomplete="off" class="form-control" data-provide="datepicker" style="width: 120px;">
                              <span class="input-group-text">至</span>
                              <input type="text" name="end" autocomplete="off" class="form-control" data-provide="datepicker" style="width: 120px;">
                            </div>
                          </div>
                        <div class="col-auto">
                          <button type="submit" class="btn btn-primary" onclick="search();"><span class="mdi mdi-magnify"></span> 查询</button>
                          <button type="reset" class="btn btn-default btn-light"><span class="mdi mdi-refresh"></span> 重置</button>
                        </div>
                      </form>
                  </div>
                  <!-- end search-->

                  <div id="toolbar" class="toolbar-btn-action">
                    <button type="button" class="btn btn-success me-1 btn-sm" onclick="add();">
                      <span class="mdi mdi-plus"></span> 新增
                    </button>
                    <button type="button" class="btn btn-info me-1 btn-sm" onclick="exportAll();">
                      <span class="mdi mdi-export"></span> 导出
                    </button>
                  </div>
                  <!-- content -->
                  <div class="row">
                    <div class="col-auto">
                        <div id="types-tree" style="background: #f8f8f8; padding: 10px; margin-top: 10px;"></div>
                    </div>
                    <div class="col">
                        <table id="table"></table>
                    </div>
                  </div>
            </div>
        </div>
    </div>
</div>

<div class="modal fade" id="myModal" tabindex="-1" aria-labelledby="exampleModalLiveLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
      <div class="modal-content">
        <div class="modal-header">
          <h6 class="modal-title" id="exampleModalLiveLabel">成员信息</h6>
          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
        </div>
        <form action="{:url('system/user/save')}" method="post" class="input-form needs-validation" novalidate>
          <input type="hidden" name="id" value="" id="post-id">
          <div class="modal-body">
            <div class="mb-3 row">
                <label for="pid" class="col-sm-3 col-form-label">所属部门 <font color="red">*</font></label>
                <div class="col-sm-9">
                  <select class="form-select" name="pid" id="pid" required>
                    <option value="">-- 选择 --</option>
                    {$options|raw}
                  </select>
                </div>
            </div>
            <div class="mb-3 row">
                <label for="role" class="col-sm-3 col-form-label">所属角色</label>
                <div class="col-sm-9">
                  <select class="form-select" name="role" id="role">
                    <option value="0">-- 选择 --</option>
                    {volist name="role" id="abc"}
                    <option value="{$key}">{$abc}</option>
                    {/volist}
                  </select>
                </div>
            </div>
            <div class="mb-3 row">
                <label for="job" class="col-sm-3 col-form-label">所属岗位</label>
                <div class="col-sm-9">
                  <select class="form-select" name="job" id="job">
                    <option value="0">-- 选择 --</option>
                    {volist name="jobs" id="job"}
                    <option value="{$key}">{$job}</option>
                    {/volist}
                  </select>
                </div>
            </div>
                  <div class="mb-3 row">
                      <label for="username" class="col-sm-3 col-form-label">账户名 <font color="red">*</font></label>
                      <div class="col-sm-9">
                          <input type="text" class="form-control" id="username" name="username" autocomplete="off" required>
                      </div>
                  </div>
                  <div class="mb-3 row">
                      <label for="nickname" class="col-sm-3 col-form-label">昵称 <font color="red">*</font></label>
                      <div class="col-sm-9">
                          <input type="text" class="form-control" id="nickname" name="nickname" autocomplete="off" required>
                      </div>
                  </div>
                  <div class="mb-3 row">
                      <label for="phone" class="col-sm-3 col-form-label">手机号码 <font color="red">*</font></label>
                      <div class="col-sm-9">
                          <input type="text" class="form-control" id="phone" name="phone" autocomplete="off" required>
                      </div>
                  </div><!-- 角色 岗位 -->
                  <div class="mb-3 row">
                    <label for="password" class="col-sm-3 col-form-label">密码</label>
                    <div class="col-sm-9">
                        <input type="text" class="form-control" id="password" name="password" autocomplete="off">
                        <div style="font-size: 12px; color: gray;">留空则不修改密码</div>
                    </div>
                </div>
                
          </div>
          <div class="modal-footer">
              <button type="submit" class="btn btn-primary">确定</button>
              <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">关闭</button>
          </div>
      </form>
      </div>
    </div>
  </div>

<script>
    var myModal = null;
 function add(){
    $('.input-form')[0].reset();
    $('#post-id').val('');
    myModal.show();
 }
  function search(){
        var data  = $('#search-form').serialize();
        var url = get_table_base_url('#table');
       $('#table').bootstrapTable('refresh', {
            url: url + '?' + data,
        });
    }
  function exportAll(){
    var l = $('body').lyearloading({
        opacity: 0.2,
        spinnerSize: 'lg'
    });
    var data  = $('#search-form').serialize();
    $.get("{:url('system/user/export')}?" + data, {}, function(res){
        l.destroy();
        layer.alert('导出成功', { icon: 'success' });
        window.location.href = res.url;
    });
  }
  function setStatus(id){
    xp_confirm("{:url('system/user/status')}", {id: id}, function (){
        $('#table').bootstrapTable('refresh');
    });
 }
 function setLogin(id){
    xp_confirm("{:url('system/user/login')}", {id: id}, function (){
        $('#table').bootstrapTable('refresh');
    });
 }
 function editPost(id){
    $.post("{:url('system/user/view')}", {id: id}, function (res){
        $('#post-id').val(id);
        $('#pid').val(res.dept_id);
        $('#username').val(res.username);
        $('#nickname').val(res.nickname);
        $('#phone').val(res.phone);
        $('#role').val(res.role_id);
        $('#job').val(res.job_id);
        myModal.show();
    });
 }
 function removePost(id){
    xp_confirm("{:url('system/user/remove')}", {id: id}, function (){
        $('#table').bootstrapTable('refresh');
    });
 }
    $(function (){
        myModal = new bootstrap.Modal($('#myModal'));
        $('#types-tree').jstree({
            'core' : {
                'themes' : {
                    'responsive': false
                },
                'data' : {$tree|raw},
                'multiple': false
            },
            'plugins' : ['types']
        });
        $('#types-tree').on("changed.jstree", function (e, data) {
            $('#table').bootstrapTable('refresh', {
                url: "{:url('system/user/data')}?dept_id=" + data.selected.join(','),
            });
        });
        validation_form('.input-form', function (){
          myModal.hide();
          $('#table').bootstrapTable('refresh');
      });
    $('#table').bootstrapTable({
          toolbar: '#toolbar',
          classes: 'table table-bordered table-hover table-striped lyear-table',
          url: "{:url('system/user/data')}",
          pagination: true,
          search: false,
          pageSize: 20,
          sidePagination: 'server',
          columns: [
              {'field': 'id', title: 'ID'},
              {'field': 'username', title: '登录账号'},
              {'field': 'nickname', title: '昵称'},
              {'field': 'dept', title: '部门', formatter: function(value, item){
                return value ? value.name : '-';
              }},
              {'field': 'phone', title: '手机'},
              {'field': 'status', title: '状态', formatter: function(value, item){
                if (item.id == 1){
                    return `<span class="badge bg-success">正常</span>`;
                }
                var dom = value == 1 ? `<span class="badge bg-danger">停用</span>` : `<span class="badge bg-success">正常</span>`;
                return `<span style="cursor: pointer;" onclick="setStatus('${item.id}');">${dom}</span>`;
              }},
              {'field': 'login', title: '后台', formatter: function(value, item){
                if (item.id == 1){
                    return `<span class="badge bg-success">允许</span>`;
                }
                var dom = value == 1 ? `<span class="badge bg-danger">禁止</span>` : `<span class="badge bg-success">允许</span>`;
                return `<span style="cursor: pointer;" onclick="setLogin('${item.id}');">${dom}</span>`;
              }},
              {'field': 'create_time', title: '创建时间'},
              {'field': 'actions', title: '操作', formatter: function(value, item){
                if (item.id == 1){
                  return '-';
                }
                var dom = `<span class="badge bg-info" onclick="editPost('${item.id}');" style="cursor: pointer;"><span class="mdi mdi-square-edit-outline"></span> 编辑</span>`;
                dom = dom + `<span class="badge bg-danger" onclick="removePost('${item.id}');" style="cursor: pointer; margin-left: 5px;"><span class="mdi mdi-delete-outline"></span> 删除</span>`;
                return dom;
              }},
              
          ]
      });
  })
</script>